<template>
    <div>
      <h3>欢迎使用物流数据统计后台管理系统</h3>
<!--	    <el-row :gutter="20" class="mgb20">-->
<!--		    <el-col :span="8" :xs="{span:24}" class="data-block">-->
<!--			    <el-card shadow="hover" :body-style="{ padding: '0px' }">-->
<!--				    <div class="grid-content grid-con-1">-->
<!--					    <i class="el-icon-user-solid grid-con-icon"></i>-->
<!--					    <div class="grid-cont-right">-->
<!--						    <div class="grid-num">1234</div>-->
<!--						    <div>用户访问量</div>-->
<!--					    </div>-->
<!--				    </div>-->
<!--			    </el-card>-->
<!--		    </el-col>-->
<!--		    <el-col :span="8" :xs="{span:24}" class="data-block">-->
<!--			    <el-card shadow="hover" :body-style="{ padding: '0px' }">-->
<!--				    <div class="grid-content grid-con-2">-->
<!--					    <i class="el-icon-message-solid grid-con-icon"></i>-->
<!--					    <div class="grid-cont-right">-->
<!--						    <div class="grid-num">321</div>-->
<!--						    <div>系统消息</div>-->
<!--					    </div>-->
<!--				    </div>-->
<!--			    </el-card>-->
<!--		    </el-col>-->
<!--		    <el-col :span="8" :xs="{span:24}" class="data-block">-->
<!--			    <el-card shadow="hover" :body-style="{ padding: '0px' }">-->
<!--				    <div class="grid-content grid-con-3">-->
<!--					    <i class="el-icon-s-goods grid-con-icon"></i>-->
<!--					    <div class="grid-cont-right">-->
<!--						    <div class="grid-num">5000</div>-->
<!--						    <div>数量</div>-->
<!--					    </div>-->
<!--				    </div>-->
<!--			    </el-card>-->
<!--		    </el-col>-->
<!--	    </el-row>-->
<!--      <el-row :gutter="20">-->
<!--          <el-col :span="24" :lg="{span:12}" :xl="{span:8}" class="data-block">-->
<!--              <el-card shadow="hover">-->
<!--                  <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>-->
<!--              </el-card>-->
<!--          </el-col>-->
<!--          <el-col :span="24" :lg="{span:12}" :xl="{span:8}" class="data-block">-->
<!--              <el-card shadow="hover">-->
<!--                  <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>-->
<!--              </el-card>-->
<!--          </el-col>-->
<!--        <el-col :span="24" :lg="{span:12}" :xl="{span:8}" class="data-block">-->
<!--          <el-card shadow="hover">-->
<!--            <schart class="schart" canvasId="ring" :options="options3"></schart>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </div>
</template>

<script>
import Schart from "vue-schart";
import { reactive } from "vue";
export default {
    name: "dashboard",
    components: { Schart },
    setup() {
        const options = {
            type: "bar",
            title: {
                text: "最近一周各品类销售图",
            },
            xRorate: 25,
            labels: ["周一", "周二", "周三", "周四", "周五"],
            datasets: [
                {
                    label: "百货",
                    data: [164, 178, 190, 135, 160],
                },
                {
                    label: "菜品",
                    data: [144, 198, 150, 235, 120],
                },
            ],
        };
        const options2 = {
            type: "line",
            title: {
                text: "最近几个月各品类销售趋势图",
            },
            labels: ["6月", "7月", "8月", "9月", "10月"],
            datasets: [
                {
                    label: "百货",
                    data: [164, 178, 150, 135, 160],
                },
                {
                    label: "菜品",
                    data: [74, 118, 200, 235, 90],
                },
            ],
        };
	    const options3 = {
		    type: "ring",
		    title: {
			    text: "用户类型",
		    },
		    showValue: false,
		    legend: {
			    position: "bottom",
			    bottom: 40,
		    },
		    bgColor: "#fbfbfb",
		    labels: ["微信用户", "支付宝用户", "手机h5登录"],
		    datasets: [
			    {
				    data: [500, 230, 15],
			    },
		    ],
	    };
        return {
            options,
            options2,
            options3,
        };
    },
};
</script>

<style>

.grid-content {
    display: flex;
    align-items: center;
    height: 80px;
}
.data-block {
	margin: 10px 0;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.mgb20 {
    margin-bottom: 20px;
}
.schart {
    width: 100%;
    height: 300px;
}
</style>
